﻿@Resolution : 1;
@Height: 28px * @Resolution;

div.flip-box-container {

	div.flip-box{
		height: @Height;
		width: 100px * @Resolution;
		border: 1px * @Resolution solid #CCC;
		border-radius: 10px * @Resolution;
		float: left;
		margin: 0 2px * @Resolution;
		background-image: -webkit-gradient(linear, center top, center bottom, from(#82B8E2), to(#5494C5));
		text-shadow: #1A5679 1px 1px 1px;
		-webkit-box-shadow: 1px 1px 1px black;
		color:#FFF;
		&:hover {
			background-image: -webkit-gradient(linear, center top, center bottom, from(#92B8E2), to(#68a7d5));
		}

		div.flip-box-handle{
			height: 24px * @Resolution;
			width: 24px * @Resolution;
			background: -webkit-gradient(linear,
						center top, center bottom,
						from(#CCC), color-stop(1%, #fff),
							color-stop(2%, #DDD),
							color-stop(40%, #fff),
							color-stop(60%, #fff),
							color-stop(98%, #DDD),
							color-stop(99%, #CCC),
							to(#CCC));
			border: 1px * @Resolution solid #333;
			border-radius: 10px * @Resolution;
			margin: 1px * @Resolution;
			float: left;
			&:hover {
				background: -webkit-gradient(linear,
							center top, center bottom,
							from(#CCC), color-stop(1%, #fff),
								color-stop(2%, #FFF),
								color-stop(40%, #fff),
								color-stop(60%, #fff),
								color-stop(98%, #DDD),
								color-stop(99%, #FFF),
								to(#FFF));
			}
		}

		span.flip-box-label {
			font-weight: bold;
			font-size: 12px * @Resolution;
			padding: 0 2px * @Resolution;
			line-height: @Height;
		}
	}
}